<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>    
<!DOCTYPE html>
<html>
<head>
<style>
	/* 슬라이드 외부 박스 디자인 by 기석*/
	.imageBox {
		position:relative;
        width:800px; height:400px; overflow:hidden;
        }
    
    /* 슬라이드 내부 이미지 설정 by 기석*/
    .sliderImage{
        width:400px; height:400px;
        }
        
    /* Slider Text Panel , 나중에 가능하면 추가기능으로 글씨제공 희망사항 by 기석*/
	.slider_text_penal {position: absolute; top:200px; left:50px;}
	.slider_text {position:absolute; width:250px; height:150px;}		
</style>

<script>
	$(function() {
			//슬라이더 이미지의 가로크기
		var img_width = 400, 
			
			// 슬라이더 이미지의 갯수
			// 3개로 지정
			img_cnt = 3, 
			//슬라이더 페이지 지속시간 타이머 변수
			myTimer,
			
			//slider 객체 생성.
		    slider = {
		    
		        //slider할 이미지의 위치 초기화 작업을 진행.
		        init: function() {
		            $(".imageBox > IMG").each(function(i) {
		                var left = i * img_width;
		                $(this).css({'position':'absolute', 'left':left + 'px'});
		            })
		        },
		        
		        //이미지 animation 효과
		        //슬라이드 이동 속도 조절 'fast,slow or number'
		        motion: function() { 
		            $(".imageBox > IMG").animate({'left':'-=' + img_width + 'px'}, 'slow', function() {
		                slider.update(); //animation이 완료되면 position을 update
		            })
		        },
		        
		        //이미지 position update
		        update: function() {
		            $(".imageBox > IMG").each(function() {
		                if( parseInt($(this).css('left')) < 0 )
		                    $(this).css('left', (img_width * (img_cnt - 1)) + 'px');
		            })
		        }, 
		        //이미지 slider 시작
		        //slider 갱신시간 조절 가능
		        start: function() {
		            slider.init();
		            myTimer = setInterval(function() {
		                slider.motion();
		            }, 2000);
		        }
		    }
		slider.start();
      })
</script>
    </head>
    <body>
        <div class="imageBox">
        <!-- 슬라이드 이미지 리스트 이미지 -->
	        <img class = "sliderImage" src="/Jangdolbaeng2/img/seller/apple.jpg" />     
	        <img class = "sliderImage" src="/Jangdolbaeng2/img/seller/banana.jpg" />     
	        <img class = "sliderImage" src="/Jangdolbaeng2/img/seller/apple.jpg" />            
        </div>
    </body>
</html>